import { IAuthLoader } from '@/router/AuthLoader'
import { useUserStore } from '@/store/user'
import { Button } from 'antd'
import { ButtonProps } from 'antd'
import React from 'react'
import { useRouteLoaderData } from 'react-router-dom'

interface AuthButtonProps extends Partial<ButtonProps> {
  /**
   * 按钮权限字段
   */
  auth?: string
}

const AuthButton: React.FC<AuthButtonProps> = props => {
  const data = useRouteLoaderData('root') as IAuthLoader
  const role = useUserStore(state => state.userInfo.role)
  if (!props.auth) return <Button {...props}>{props.children}</Button>
  // role === 1 管理员权限
  if (data.buttonList.includes(props.auth) || role === 1) {
    return <Button {...props}>{props.children}</Button>
  }
  return <></>
}

export default AuthButton
